<template>
  <div id="dashboard">
    <router-view></router-view>
    <!-- tabbar组件，v-model双向绑定active，
     active-color选中的颜色-->
    <van-tabbar v-model="active" active-color="#75a342">
        <!-- replace to当点击时切换指定路由 -->
      <van-tabbar-item replace to="/dashboard/home">
        <span>首页</span>
        <!-- props为作用域插槽，当选中它时，显示点击图标 -->
        <template #icon="props">
            <img :src="props.active ? home_icon.active : home_icon.inactive" alt="首页">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/dashboard/category">
          <span>分类</span>
        <template #icon="props">
            <img :src="props.active ? category_icon.active : category_icon.inactive" alt="分类">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/dashboard/cart">
          <span>购物车</span>
        <template #icon="props">
            <img :src="props.active ? cart_icon.active : cart_icon.inactive" alt="购物车">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/dashboard/mine">
            <span>我的</span>
        <template #icon="props">
            <img :src="props.active ? mine_icon.active : mine_icon.inactive" alt="我的">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "DashBoard",
  data(){
      return{
          active: 0,
          home_icon:{
              active: require('@/images/tabbar/home_selected.png'),
              inactive: require('@/images/tabbar/home_default.png')
          },
          category_icon:{
              active: require('@/images/tabbar/category_selected.png'),
              inactive: require('@/images/tabbar/category_default.png')
          },
          cart_icon:{
              active: require('@/images/tabbar/shoppingcart_selected.png'),
              inactive: require('@/images/tabbar/shoppingcart_default.png')
          },
          mine_icon:{
              active: require('@/images/tabbar/mine_selected.png'),
              inactive: require('@/images/tabbar/mine_default.png')
          },
      }
  }
};
</script>

<style lang="less" scoped>
#dashboard {
  width: 100%;
  height: 100%;
  background-color: #90e0ef;
}
</style>